<!DOCTYPE HTML>
<html>
    <head>
        <title>超级网页编程</title>
        <meta charset="utf-8">
        <style>
            html,body,div,span,input,textarea,ul,li,ol,img,a,h1,h2,h3,h4,h5,h6,p,select,option{padding:0;border:0;margin:0;outline:0;box-sizing:border-box;}
            html{position:absolute;top:0;right:0;bottom:0;left:0;}
            body{width:100%;height:100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color:transparent;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;overflow:hidden;}
            a{text-decoration:none;color: inherit;}
            a,span{display: inline-block;}
            textarea{width:100%;height:300px;border:1px solid #ddd;}
            .convert{height:50px;}
            .convert span{height:40px;width:50px;background-color:#f60;color:#fff;line-height:40px;text-align:center;float:right;margin-top:5px;margin-right:10px;cursor:pointer;}
        </style>
    </head>
    <body>
        <textarea id="textarea">
《声明》
《网页》
    《头部》
        《网页编码》
        《标题》HTML文件模板测试《标题尾》
        《引入样式 源="首页"》
        《样式》
            
        《样式尾》
    《头部尾》
    《身体》
        《元素 唯一标识="顶部" 普通标识="顶部"》
            顶部显示文字
        《元素尾》
        《脚本 源="随易中文"》《脚本尾》
    《身体尾》
《网页尾》
        </textarea>
        <div class="convert">
            <span id="confirm">确认</span>
        </div>
        <div id="preview"></div>
        <script>
            document.getElementById('confirm').addEventListener('click',function(){
                var attributes = {
                    '源'      :'src=',
                    '唯一标识':'id=',
                    '普通标识':'class='
                };
                
                var elements = {
                    '声明'    :'<!DOCTYPE HTML',
                    '网页'    :'<html',
                    '网页尾'  :'</html',
                    '标题'  :'<title',
                    '标题尾'  :'</title',
                    '头部'    :'<head',
                    '头部尾'  :'</head',
                    '身体'    :'<body',
                    '身体尾'  :'</body',
                    '元素'    :'<div',
                    '元素尾'  :'</div',
                    '引入样式':'<link',
                    '样式'    :'<style',
                    '样式尾'  :'</style',
                    '脚本'    :'<script',
                    '脚本尾'  :'</script'
                };
                
                var str = document.getElementById('textarea').value;
                var match = str.match(/《.+?》/g);
                var ele_array = [];
                var attr_array = [];
                var ele_hash = {};
                var attr_hash = {};
                var ele_end = [];
                var ele_start = [];
                match.forEach(function(v,i){
                    if(/\s/.test(v)){//有属性标签
                        v.replace(/[《|》]/g,'').split(' ').forEach(function(vv,ii){
                            if(/\=/g.test(vv)){//元素属性
                                vv = vv.split('=')[0];
                                if(!attr_hash[vv]){
                                    attr_hash[vv] =true;
                                    attr_array.push(vv);
                                }
                            }else{//第一个元素标签
                                if(!ele_hash[vv]){
                                    ele_hash[vv] = true;
                                    ele_start.push(vv);
                                }
                            }
                        });
                    }else{//单个无属性标签
                        v = v.slice(1,-1);
                        if(!ele_hash[v]){
                            ele_hash[v] = true;
                            if(/尾/.test(v)){
                                ele_end.unshift(v);
                            }else{
                                ele_end.push(v);
                            }
                        }
                    }
                });
                str = str.replace(/》/g,'>');
                ele_array = ele_end.concat(ele_start);
                ele_array.forEach(function(v,i){
                    var reg = new RegExp('《' + v,'g');
                    if(elements[v]){
                        str = str.replace(reg,elements[v]);
                    }
                });
                attr_array.forEach(function(v,i){
                    var reg = new RegExp(v + '=','g');
                    if(attributes[v]){
                        str = str.replace(reg,attributes[v]);
                    }
                });
                //console.dir(ele_array);
                //console.dir(attr_array);
                //console.dir(ele_hash);
                //console.dir(attr_hash);
                //console.dir(str);
                document.getElementById('preview').innerText = str;
            });
        </script>
    </body>
</html>